<template>
  <div class="app-container">
  <div class="filter-container">
        <el-button type="primary" @click="analizeClick()">库存盘点分析</el-button>
        <el-input clearable v-model="search.number" placeholder="VIN码" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.number" placeholder="订单编号" style="width: 170px;margin-left:10px;"></el-input>
        <el-input clearable v-model="search.name" placeholder="仓库仓位" style="width: 170px;margin-left:10px;"></el-input>
        <!-- <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="margin-left:10px;">
        </el-date-picker> -->

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
     <el-table-column  min-width="100" align="center" label="采购订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.ordernumber }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="具体车型">
        <template slot-scope="scope">
          <span>{{ scope.row.carname }}</span>
        </template>
      </el-table-column>
      
      <el-table-column  min-width="100" align="center" label="仓库名称">
        <template slot-scope="scope">
          <span>{{ scope.row.storename }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="仓位名称">
        <template slot-scope="scope">
          <span>{{ scope.row.storeplace }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="实际入库时间">
        <template slot-scope="scope">
          <span>{{ scope.row.entrytime }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="财务付款时间">
        <template slot-scope="scope">
          <span>{{ scope.row.paytime }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="已付款天数">
        <template slot-scope="scope">
          <span>{{ scope.row.payday }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="是否借出">
        <template slot-scope="scope">
          <span>{{ scope.row.lendstate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="是否改装">
        <template slot-scope="scope">
          <span>{{ scope.row.refitstate }}</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="100" align="center" label="在库状态">
        <template slot-scope="scope">
          <span>{{ scope.row.storestate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作"  width="520" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="tableRowClick().rebate(scope.row.id)">返利</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().edit(scope.row.id)">修改</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().refit(scope.row.id)">改装</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().lend(scope.row.id)">借车</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().lendreturn(scope.row.id)">借车归还</el-button>
          <el-button type="primary" size="small" @click="tableRowClick().details(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="fetchData" />

<!-- 返利 -->
<el-dialog :title="dialogRebate.title" :visible.sync="dialogRebate.visible"  width="700px">
    <div class="ci">
      
      <div class="item">
           <span class="name">预计返利项目：</span>
          <span class="value">
              <el-select v-model="dialogRebate.data.rebateitem" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.rebateitem"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
          </span>
      </div>
      <div class="item">
          <span class="name">预计返利金额：</span>
          <span class="value">
              <el-input clearable v-model="dialogRebate.data.rebatemoney" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>

    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRebate.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogRebateClick().save()" :loading="dialogRebate.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  返利 -->

<!-- 新增/编辑 -->
<el-dialog :title="dialogAdd.title" :visible.sync="dialogAdd.visible"  width="700px">
    <div class="ci">
      
      <div class="item">
          <span class="name">仓库：</span>
          <span class="value">
              <el-input clearable v-model="dialogAdd.data.storename" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item">
          <span class="name">仓位：</span>
          <span class="value">
              <el-input clearable v-model="dialogAdd.data.storeplace" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogAddClick().save()" :loading="dialogAdd.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  新增/编辑 -->

<!-- 改装 -->
<el-dialog :title="dialogRefit.title" :visible.sync="dialogRefit.visible"  width="900px">
    <div class="ci">
      
      <div class="item">
          <span class="name">选择套餐：</span>
          <span class="value">
              <el-select v-model="dialogRefit.data.setmeal" clearable placeholder="--" style="width: 220px;">
                    <el-option 
                    v-for="(item,index) in selectOptions.rebateitem"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
          </span>
      </div>
      <div class="item">
          <span class="name">价格：</span>
          <span class="value">
              <el-input disabled v-model="dialogRefit.data.setmealprice" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      
      <div class="item hauto">
          <span class="name">备注</span>
          <span class="value">
              <el-input type="textarea" :rows="3" clearable v-model="dialogRefit.data.remark" placeholder="" style="width:100%" ></el-input>
          </span>
      </div>
      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRefit.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogRefitClick().save()" :loading="dialogRefit.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  改装 -->

<!-- 借车 -->
<el-dialog :title="dialogLend.title" :visible.sync="dialogLend.visible"  width="900px">
    <div class="ci">
      
      <div class="item">
          <span class="name">采购订单编号：</span>
          <span class="value">
              {{dialogLend.data.ordernumber}}
          </span>
      </div>
      <div class="item">
          <span class="name">具体车型</span>
          <span class="value">
              {{dialogLend.data.carname}}
          </span>
      </div>
      <div class="item">
          <span class="name">VIN码</span>
          <span class="value">
              {{dialogLend.data.vincode}}
          </span>
      </div>
      <div class="item">
          <span class="name">仓库名称</span>
          <span class="value">
              {{dialogLend.data.storename}}
          </span>
      </div>
      <div class="item">
          <span class="name">仓位</span>
          <span class="value">
              {{dialogLend.data.storeplace}}
          </span>
      </div>
      <div class="item">
          <span class="name">借车人员：</span>
          <span class="value">
              <el-input  v-model="dialogLend.data.lendparson" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item">
          <span class="name">借车用途：</span>
          <span class="value">
              <el-input  v-model="dialogLend.data.reason" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>

      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLend.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogLendClick().save()" :loading="dialogLend.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  借车 -->

<!-- 借车归还 -->
<el-dialog :title="dialogLendReturn.title" :visible.sync="dialogLendReturn.visible"  width="900px">
    <div class="ci">
      
      <div class="item">
          <span class="name">采购订单编号：</span>
          <span class="value">
              {{dialogLendReturn.data.ordernumber}}
          </span>
      </div>
      <div class="item">
          <span class="name">具体车型</span>
          <span class="value">
              {{dialogLendReturn.data.carname}}
          </span>
      </div>
      <div class="item">
          <span class="name">VIN码</span>
          <span class="value">
              {{dialogLendReturn.data.vincode}}
          </span>
      </div>
      <div class="item">
          <span class="name">仓库名称</span>
          <span class="value">
              {{dialogLendReturn.data.storename}}
          </span>
      </div>
      <div class="item">
          <span class="name">仓位</span>
          <span class="value">
              {{dialogLendReturn.data.storeplace}}
          </span>
      </div>
      <div class="item">
          <span class="name">借车人员：</span>
          <span class="value">
              {{dialogLendReturn.data.lendparson}}
          </span>
      </div>
      <div class="item">
          <span class="name">借车用途：</span>
          <span class="value">
              {{dialogLendReturn.data.reason}}
          </span>
      </div>
      <div class="item">
          <span class="name">仓库名称：</span>
          <span class="value">
              <el-input  v-model="dialogLendReturn.data.rtstorename" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>
      <div class="item">
          <span class="name">仓位名称：</span>
          <span class="value">
              <el-input  v-model="dialogLendReturn.data.rtstoreplace" placeholder="" style="width:220px;" ></el-input>
          </span>
      </div>

      
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLendReturn.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogLendReturnClick().save()" :loading="dialogLendReturn.saveloading">保 存</el-button>
    </div>
</el-dialog>
<!-- end  借车归还 -->

  </div>
</template>

<script>
import * as carPurchaseApi from '@/api/cars/purchase'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import * as enumHelper from '@/utils/enum'
import {objectMerge,objectEmpty} from '@/utils/index'

export default {
    name:'carlist2',
    components: { Pagination },
    data(){
        return{
          search:{ 
              number:'',
              customer:'',
              phone:'',
              daterange:'',
          },
          listQuery: {
                page: 1,
                rows: 20,
                name:'',
                phone:'',
                state:-1,
                daterange:''
          },
          list:null,
          listLoading:false,
          total:0,
          selectOptions:{
            rebateitem:[],
            paystage:[],
          },
          dialogRebate:{
              visible:false,
              saveloading:false,
              title:'返利项目',
              data:{
                  id:'',
                  rebateitem:'',
                  rebatemoney:'',
              }
          },
          dialogAdd:{
              visible:false,
              saveloading:false,
              title:'新增/编辑',
              data:{
                  id:'',
                  storename:'',
                  storeplace:'',
              }
          },
          dialogRefit:{
              visible:false,
              saveloading:false,
              title:'改装',
              data:{
                  id:'',
                  purchasetype:'',
              }
          },
          dialogLend:{
              visible:false,
              saveloading:false,
              title:'借车',
              data:{
                  id:'',
                  ordernumber:'',
                  carname:'',
                  vincode:'',
                  storename:'',
                  storeplace:'',
                  lendparson:'',
                  reason:'',
              }
          },
          dialogLendReturn:{
              visible:false,
              saveloading:false,
              title:'借车归还',
              data:{
                  id:'',
                  ordernumber:'',
                  carname:'',
                  vincode:'',
                  storename:'',
                  storeplace:'',
                  lendparson:'',
                  reason:'',
                  rtstorename:'',
                  rtstoreplace:'',
              }
          },
        }
    },
    created(){
        var that=this;
        //初始化下拉菜单
        //enumHelper.initOptions(that.selectOptions.purchasetype,enumHelper.cars.purchaseType);
        //enumHelper.initOptions(that.selectOptions.paystage,enumHelper.cars.payStage);
        that.fetchData();
    },
    filters:{

      parseSalesState(val){
        return enumHelper.presale.salesState.getName(val);
      }

    },
    methods:{
        fetchData(){
          var that=this;
            carPurchaseApi.getStoreList({}).then(res=>{
              if(res.data){
                that.list=[...res.data.items.map((item,index)=>{
                  item._id=index+1;
                  return item;
                })];
              }
            })
        },
        addClick(){
          this.dialogAdd.visible=true;
          this.dialogAddClick().init(null);
        },
        tableRowClick(){
          var that=this;
          return {
            rebate(id){
                that.dialogRebateClick().init();
                that.dialogRebate.visible=true;
            },
            edit(id){
              var data=that.list.filter(o=>id==id)[0];
              that.dialogAddClick().init(data);
              that.dialogAdd.visible=true;
            },
            
            refit(id){
              var data=that.list.filter(o=>id==id)[0];
              that.dialogRefitClick().init();
              that.dialogRefit.visible=true;
            },
            lend(id){
                var data=that.list.filter(o=>id==id)[0];
                that.dialogLendClick().init(data);
                that.dialogLend.visible=true;
            },
            lendreturn(id){
                var data=that.list.filter(o=>id==id)[0];
                that.dialogLendReturnClick().init(data);
                that.dialogLendReturn.visible=true;
            },
            details(id){
                that.$router.push({path:'/cars/cardetails/'+id});
            }
          }
        },
        dialogRebateClick(){
          var that=this;
          var dg=that.dialogRebate;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
            }
          }
        },
        dialogAddClick(){
          var that=this;
          var dg=that.dialogAdd;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
            }
          }
        },
        dialogRefitClick(){
          var that=this;
          var dg=that.dialogRefit;
          return{
            init(){
              objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
              that.$message({
                  type:'success',
                  message:'正在进入加装明细模块'
              })
            }
          }
        },
        dialogLendClick(){
          var that=this;
          var dg=that.dialogLend;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
              that.$message({
                  type:'success',
                  message:'保存成功'
              })
            }
          }
        },
        dialogLendReturnClick(){
          var that=this;
          var dg=that.dialogLendReturn;
          return{
            init(data){
              data?objectMerge(dg.data,data):objectEmpty(dg.data);
            },
            save(){
              dg.visible=false;
              that.$message({
                  type:'success',
                  message:'保存成功'
              })
            }
          }
        },
    }
}
</script>

<style scoped>

</style>